import React, { useState } from "react";
import Question from './Question'
import { FloatButton,Tooltip,Spin,Radio } from 'antd';
import { FilterOutlined } from '@ant-design/icons';
import 'antd/dist/reset.css';

export default function AllQuestions(props) {
  const { questions } = props
  const [filterFlag, setFilterFlag] = useState([false])
  const [filterValue, setFilterValue] = useState('all')
  const [loadingFlag, setLoadingFlag] = useState(false)
  const changeFilgerFlag = ()=> {
    setLoadingFlag(true)
    setTimeout(() => setLoadingFlag(false), 2000 )
    setFilterFlag(!filterFlag)
  }
  const getDisplayFlag = item =>{
    const {selections,answers}= item
    switch(filterValue){
      case 'judge':
        return !(selections.length === 2)
      case 'single':
        return !(answers.length === 1)
      case 'multiple':
        return !(answers.length >= 2)
      default:
        return false
    }

  }
  const {questionList} = questions;

  return (
    <div>
      <Spin spinning={loadingFlag}>
        <div style={{'paddingBottom':'15px'}}>
          <Radio.Group defaultValue="all" buttonStyle="solid" onChange={e => setFilterValue(e.target.value)}>
            <Radio.Button value="all">全部 ({questionList.length})</Radio.Button>
            <Radio.Button disabled={questionList.filter(item=> item.selections.length === 2).length === 0} value="judge">判断 ({questionList.filter(item=> item.selections.length === 2).length})</Radio.Button>
            <Radio.Button disabled={questionList.filter(item=> item.answers.length === 1).length === 0} value="single">单选 ({questionList.filter(item=> item.answers.length === 1).length})</Radio.Button>
            <Radio.Button disabled={questionList.filter(item=> item.answers.length >= 2).length === 0} value="multiple">多选 ({questionList.filter(item=> item.answers.length >= 2).length})</Radio.Button>
          </Radio.Group>
        </div>
          {questionList.map((item,index)=>(
              <Question key={index} index={index} displayFlag={!filterFlag || getDisplayFlag(item)} {...item}/>
          ))}
      <Tooltip title={filterFlag?"只显示被标记的题目":"显示全部题目"}><FloatButton icon={<FilterOutlined/>} shape="square" type={filterFlag?'primary':''} style={{ right: 24 }} onClick={()=> changeFilgerFlag()} /></Tooltip>
      </Spin>
    </div>
  )
}
